{{! -------------------------------------------------------------------------- }}
{{! Copyright 2002-2016, OpenNebula Project, OpenNebula Systems                }}
{{!                                                                            }}
{{! Licensed under the Apache License, Version 2.0 (the "License"); you may    }}
{{! not use this file except in compliance with the License. You may obtain    }}
{{! a copy of the License at                                                   }}
{{!                                                                            }}
{{! http://www.apache.org/licenses/LICENSE-2.0                                 }}
{{!                                                                            }}
{{! Unless required by applicable law or agreed to in writing, software        }}
{{! distributed under the License is distributed on an "AS IS" BASIS,          }}
{{! WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   }}
{{! See the License for the specific language governing permissions and        }}
{{! limitations under the License.                                             }}
{{! -------------------------------------------------------------------------- }}

<div class="row">
  <div class="large-12 columns">
    <dl id="{{unique_id}}Tabs" class="tabs sunstone-info-tabs" data-tabs>
      <dd class="tabs-title is-active"><a href="#vdcClustersTab_{{unique_id}}"><i class="fa fa-th"></i><br>{{tr "Clusters"}}</a></dd>
      <dd class="tabs-title"><a href="#vdcHostsTab_{{unique_id}}"><i class="fa fa-hdd-o"></i><br>{{tr "Hosts"}}</a></dd>
      <dd class="tabs-title"><a href="#vdcVnetsTab_{{unique_id}}"><i class="fa fa-globe"></i><br>{{tr "VNets"}}</a></dd>
      <dd class="tabs-title"><a href="#vdcDatastoresTab_{{unique_id}}"><i class="fa fa-folder-open"></i><br>{{tr "Datastores"}}</a></dd>
    </dl>
    <div class="tabs-content" data-tabs-content="{{unique_id}}Tabs">
      <div class="tabs-panel is-active" id="vdcClustersTab_{{unique_id}}">
        <div class="row">
          <div class="large-12 columns">
            <label for="all_clusters_{{unique_id}}">
              <input type="checkbox" name="all_clusters_{{unique_id}}" id="all_clusters_{{unique_id}}" />
              {{tr "All"}}
              <span class="tip">{{tr "Selects all current and future clusters"}}</span>
            </label>
          </div>
        </div>
        <div class="vdc_clusters_select">
          {{{clustersTableHTML}}}
        </div>
      </div>
      <div id="vdcHostsTab_{{unique_id}}" class="tabs-panel">
        <div class="row">
          <div class="large-12 columns">
            <label for="all_hosts_{{unique_id}}">
              <input type="checkbox" name="all_hosts_{{unique_id}}" id="all_hosts_{{unique_id}}" />
              {{tr "All"}}
              <span class="tip">{{tr "Selects all current and future hosts"}}</span>
            </label>
          </div>
        </div>
        <div class="vdc_hosts_select">
          {{{hostsTableHTML}}}
        </div>
      </div>
      <div id="vdcVnetsTab_{{unique_id}}" class="tabs-panel">
        <div class="row">
          <div class="large-12 columns">
            <label for="all_vnets_{{unique_id}}">
              <input type="checkbox" name="all_vnets_{{unique_id}}" id="all_vnets_{{unique_id}}" />
              {{tr "All"}}
              <span class="tip">{{tr "Selects all current and future vnets"}}</span>
            </label>
          </div>
        </div>
        <div class="vdc_vnets_select">
          {{{vnetsTableHTML}}}
        </div>
      </div>
      <div id="vdcDatastoresTab_{{unique_id}}" class="tabs-panel">
        <div class="row">
          <div class="large-12 columns">
            <label for="all_datastores_{{unique_id}}">
              <input type="checkbox" name="all_datastores_{{unique_id}}" id="all_datastores_{{unique_id}}" />
              {{tr "All"}}
              <span class="tip">{{tr "Selects all current and future datastores"}}</span>
            </label>
          </div>
        </div>
        <div class="vdc_datastores_select">
          {{{datastoresTableHTML}}}
        </div>
      </div>
    </div>
  </div>
</div>
